как сделать интерфейсы доступнее

Провёл внутренний митап по инклюзивности и делюсь с вами основными моментами. Надеюсь, хотя бы один интерфейс с этого дня станет доступнее.

Если вы не понимаете, что такое доступность и какие там проблемы, то посмотрите вот этот пост с двумя короткими видео-примерами.

Инклюзивность — это просто

Основной принцип доступности: «Нормально делай — нормально будет». Всё становится инклюзивным из коробки, автоматически, при правильном использовании. Если вы используете семантические теги, не вёрстаете кнопки div'ами, то 90 % вашего сайта или приложения уже хорошо прочитаются скринридерами. И это классно.

Про остальные 10 % и поговорим. Цифры, кстати, из головы — просто я так вижу.

Для правильного прочтения интерактивных элементов есть атрибут aria-label. У него есть особенность: он иногда работает и для статических элементов в некоторых читалках, но так его использовать неправильно. Нельзя использовать aria-label для divов, spanов и прочих параграфов, если в них просто текст.

Если элемент интерактивный, но свёрстан не теми тегами, то есть лайфхак — можно добавить ему role="button | link | ..." — и он только тогда станет интерактивным и будет нормально озвучиваться.

Если у вас есть текст, который не должен читаться, то нужно элементу добавить aria-hidden, и читалка его будет игнорировать.

Иногда есть очень красивая вёрстка, которая визуально понятна, но читается не очень хорошо. Например, мы видим «5% Супермаркеты», но хотим, чтобы читалось как «5% за покупки в категории "Супермаркеты"». Во-первых, это неправильно, так как нарушает Основной принцип. Во-вторых, это не проблема — переступаем через перфекционизм и добавляем на блок aria-hidden, тем самым скрывая его от читалки, а рядом кладём нужный текст в блок с классом .visually-hidden (загуглите реализацию), который визуально невидимый, но прекрасно читается скринридерами.

Да, без костылей не обойтись и в 2025 году. Думаю, это будет мой любимый вопрос на собеседованиях в ближайшие годы.

А в следующем посте на эту тему расскажу про инструменты, которые помогут в разработке и отладке инклюзивности.

Отправь этот пост своему другу-фронтендеру. И подпишись!

#инклюзивность #доступность #фронтенд